<template>
  <div>
    <el-dialog title="修改员工信息" :visible="show" :modal-append-to-body="false" :close-on-click-modal="true" :before-close="cmdClose" center @open="cmdInit" width="500px" top="10vh">
      <div>
        <el-form ref="form" label-width="90px" :model="formData" :rules="ruleData">
          <el-form-item label="姓名" prop="name">
            <el-input placeholder="请输入姓名" v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="职位" prop="position">
            <el-input placeholder="请输入职位" v-model="formData.position"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input placeholder="请输入电话" v-model="formData.phone"></el-input>
          </el-form-item>
          <el-form-item label="角色" prop="role">
            <el-input placeholder="请输入角色" v-model="formData.role"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cmdSubmit">确定</el-button>
        <el-button type="primary" @click="cancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import swal from 'sweetalert'
import _ from 'underscore'
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    id: [String],
  },
  data: function () {
    return {
      formData: {
        name: '',
        position: '',
        phone: '',
        role: '',
      },
      ruleData: {},
    }
  },
  methods: {
    cmdClose: function () {
      this.$emit('closeDlg')
    },
    cmdInit () { },
    cmdSubmit: _.debounce(
      function () {
        this.$refs.form.validate((valid) => {
          if (!valid) return false
          this.$emit('closeDlg')
        })
      },
      800,
      true
    ),
    cancel () {
      this.cmdClose()
    },
  },
}
</script>
